<template>
  <div class="my-wishlist">
    <h1 class="title1">My Wishlist</h1>
    <div class="show-info " v-show="isAddToCart">
      <svg t="1530091345071" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3493" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30"><defs></defs><path d="M511.990279 128.255059c-211.93183 0-383.745964 171.803901-383.745964 383.743918 0 211.942063 171.814134 383.745964 383.745964 383.745964C723.941552 895.744941 895.754662 723.94104 895.754662 511.998977 895.754662 300.05896 723.941552 128.255059 511.990279 128.255059zM511.990279 855.350952c-189.624778 0-343.331509-153.707754-343.331509-343.340719 0-189.644221 153.707754-343.361185 343.331509-343.361185 189.643198 0 343.371418 153.716964 343.371418 343.361185C855.361697 701.643198 701.633477 855.350952 511.990279 855.350952zM465.185276 576.920592 361.576547 473.310839l-36.982286 37.002752 139.526777 139.545196 1.065262-1.065262 1.065262 1.065262 235.9345-235.936547-37.000706-37.002752L465.185276 576.920592z" p-id="3494" fill="#18823a"></path></svg>
      Deal added to cart
    </div>
    <div class="title2">
      <span class="t-1">Item </span>
      <span class="t-2">Unit Price</span>
    </div>
    <div class="list-box">
      <ul class="ul-list" v-for="(item,index) in wishLishData" :key="index">
        <li class="li-img" v-show="!isRemovedArr[index]">
          <router-link class="img-box" target="_blank" :to="'/home/' + item.urlKeyWords+ '/'+ item.sku">
            <img v-lazy="imgUrl+ item.images[0].src +'?x-oss-process=image/resize,h_150,limit_0'" ref="imgs" alt="Shop Meet50off"  class="img">
          </router-link>
        </li>
        <li class="li-title" v-show="!isRemovedArr[index]">
          <router-link class="head-line" target="_blank" :title="item.headLine" :to="'/home/' + item.urlKeyWords+ '/'+ item.sku">{{item.headLine}}</router-link>
          <p class="p1">{{productAttributes(item)}}</p>
          <!--<p class="p2">Clothing, Shoes & Jewelry</p>-->
          <p class="p2"></p>
        </li>
        <li class="li-price" v-show="!isRemovedArr[index]">
          <span class="price1">${{item.originalPrice.amount}}</span>&nbsp;<span>${{item.price.amount}}</span>
        </li>
        <li class="li-do" v-show="!isRemovedArr[index]">
          <p class="remove"><span class="move-wishlist" @click="_addToCart(item,index)">Add to Cart</span><span @click="_removeWishList(item,index)">Remove</span></p>
        </li>
        <li class="undo" v-show="isRemovedArr[index]">
          <span class="undo1">Removed</span><span @click="undoWishlist(item,index)" class="undo2">Undo</span>
        </li>
      </ul>
      <div class="loading-container" v-show="Loading">
        <loading></loading>
      </div>
      <div v-show="!Loading && !wishLishData.length" class="no-result-wrapper" ref="noDataEl">
        <no-data-show :title="'Wishlist'" :footBtn="'Continue Shopping'"></no-data-show>
      </div>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import Loading from 'base/loading/loading'
  import {getWishList,addWishList,removeWishList} from 'api/my-wishlist'
  import {getCartList,addToCart} from 'api/cart'
  import NoDataShow from "../../base/no-data-show/no-data-show";
  import monitoring from "../../common/js/monitoring"
  export default {
    data() {
      return {
        wishLishData :[] ,
        isRemovedArr : [],
        Loading : true,
        imgUrl : imgUrl,
        isAddToCart : false ,
      }
    },
    created() {
      monitoring.openWishList();//todo Facebook Pixel & Google Analytic Code    openWishList
      let _this =this
      this.$nextTick(() => {
        _this._getWishList()
      })
    },
    methods: {
      _getWishList(){
        let _this = this
        this.Loading = true
        getWishList().then(res => {
          this.Loading = false
          _this.wishLishData = res.wishListItems
          _this.wishLishData.forEach((item,index) => {
            this.isRemovedArr.push(false)
          })

        }).catch(err => {

        })
      },
      productAttributes(item) {
        let str = ''
        if (item.variation) {
          item.variation.productAttributes.forEach(function(t) {
            str += t.value + '/'
          })
        }
        return str.replace(/\/$/, '')
      },
      _addToCart(item,index){
        let sku = ''
        if (item.variation) {
          sku = item.variation.sku
        } else {
          sku = item.sku
        }
        addToCart(sku,1).then((res) => {
          this.wishLishData.splice(index,1)
          this.isAddToCart = true
          let _this = this
          let params = {
            sku :sku,
          };
          monitoring.addCart(params);//todo Facebook Pixel & Google Analytic Code    addCart



          setTimeout(function(){
            _this.isAddToCart = false
          },1500)
        }).catch(err => {

        })
        removeWishList(sku).then((res) => {})
      },
      _removeWishList(item,index){
        let sku = ''
        if (item.variation) {
          sku = item.variation.sku
        } else {
          sku = item.sku
        }
        let _this = this
        removeWishList(sku).then((res) => {
          monitoring.removeWishList({'sku':sku}) //todo Facebook Pixel & Google Analytic Code    removeWishList
          this.isRemovedArr.splice(index,1,true)
        })
      },
      undoWishlist(item,index){
        let sku = ''
        if (item.variation) {
          sku = item.variation.sku
        } else {
          sku = item.sku
        }

        let _this = this
        addWishList(sku).then(res => {
          monitoring.addWishList({"sku" : sku});//todo Facebook Pixel & Google Analytic Code    addWishList
          this.isRemovedArr.splice(index,1,false)
        }).catch(err => {
          console.log(err)
        })

      }
    },
    watch:{
      '$route' (to,from){
        if(from.path === '/home'|| from.path === '/' ){

        }
      },
    },
    components: {
      Loading ,
      NoDataShow
    },
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .my-wishlist
    width:100%;
    padding-bottom:75px;
    color: #333
    .title1
      font-size: 36px;
      color: #333333
      padding-top: 31px;
      margin-bottom: 12px;
    .show-info
      width: 100%
      height: 52px
      line-height: 52px
      background-color: #6bcd60
      border: solid 1px #18823a
      color: #f0efef
      font-size: 14px
      padding-left: 60px
      position: relative
      .icon
        position: absolute
        left: 20px
        top: 11px
    .title2
      font-size: 18px
      height: 56px
      line-height: 50px
      border-bottom 1px solid #dcdcdc
      .t-1
        margin-left:100px
      .t-2
        margin-left: 474px
    .ul-list
      width: 100%
      display flex
      padding:25px 0px
      border-bottom 1px solid #dcdcdc
      li
        height: 89px
      .li-img
        width: 150px
        padding:0 10px
        .img-box
          width: 100%
          height:100%
        .img
          max-width: 100%
          max-height: 100%
      .li-title
        width: 350px
        .head-line
          height: 48px
          line-height: 23px
          text-align left
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          &:hover
            text-decoration: underline;
        .p1
          margin-top: 13px
          color: #a1a0a0
          font-size: 12px
        .p2
          color: #4999e2
          font-size: 12px
          line-height: 20px
      .li-price
        width: 270px
        text-align center
        font-size: 20px;
        .price1
          color: #a1a0a0;
          font-size:16px
          text-decoration line-through
      .li-do
        flex  1
        text-align right
        color: #4999e2
        font-size: 16px
        cursor: pointer
        span
          vertical-align middle
        .remove
          margin-top: 36px;
        .move-wishlist
          display:inline-block
          height: 15px
          line-height: 15px
          padding-right: 15px
          border-right: 1px solid #cacaca
          margin-right:15px
      .undo
        flex 1
        text-align center
        line-height: 89px
        span
          vertical-align middle
        .undo1
          display:inline-block
          height: 15px
          padding-left 22px
          line-height: 15px
          padding-right: 15px
          border-right: 1px solid #cacaca
          margin-right:15px
          color:#18823a
          background url(../../../static/img/removeSuccess.png) no-repeat left center
        .undo2
          color:#4999e2
          cursor: pointer
  .no-result-wrapper
    width: 100%
    height:100%
    border-bottom: 1px solid #dcdcdc;
  .loading-container
    width: 100%
    height: 276px;
    padding-top: 192px;
    border-bottom: 1px solid #dcdcdc;







</style>
